<template>
    <div>
      <div>
        <el-form :inline="true" :model="formSearch" class="demo-form-inline">
          <el-form-item label="广告链接">
            <el-input v-model="formSearch.image_url" placeholder="请输入广告链接"></el-input>
          </el-form-item>
          <el-form-item label="广告描述">
            <el-input v-model="formSearch.remark" placeholder="请输入广告描述"></el-input>
          </el-form-item>
          <el-form-item label="广告位置">
            <el-select v-model="formSearch.open_type" placeholder="请选择广告位置">
              <el-option label="全部" :value="null"></el-option>
              <el-option v-for="(item,index) in adLocation" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="筛选时间">
            <el-date-picker
                v-model="startendDate"
                type="daterange"
                value-format="yyyy-MM-dd hh:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchClick">查询</el-button>
            <el-button type="danger" @click="clearClick">清空</el-button>
            <el-button type="success" @click="addClick">添加广告</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%">
          <el-table-column
              prop="id"
              label="ID"
              width="50">
          </el-table-column>
          <el-table-column
              prop="image_url"
              label="广告链接"
              width="150">
          </el-table-column>
          <el-table-column
              prop="image_url"
              label="广告图"
              width="180">
            <template slot-scope="scope">
              <el-image :src="baseURL+scope.row.filepath"></el-image>
            </template>
          </el-table-column>
          <el-table-column
              prop="remark"
              label="描述"
              width="100">
          </el-table-column>
          <el-table-column
              label="广告位置"
              width="120">
            <template slot-scope="scope">
              <el-tag
                  disable-transitions>{{typePosition(scope.row.open_type)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="sort"
              label="优先级"
              sortable
              width="100">
          </el-table-column>
          <el-table-column
              label="时间">
            <template slot-scope="scope">
              <div>开始时间: {{ scope.row.start_time }}</div>
              <div>到期时间: {{ scope.row.end_time }}</div>
            </template>
          </el-table-column>
          <el-table-column
              label="是否显示"
              width="100">
            <template slot-scope="scope">
              <el-switch
                  v-model="scope.row.is_show"
                  :active-value="1"
                  :inactive-value="0"
                  @change="val=>(swichEvent(val,scope.row.id))">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作">
            <template slot-scope="scope">
              <el-button type="primary" plain @click="updateClick(scope.row)">编辑</el-button>
              <el-button type="danger" plain @click="deleteClick(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--        修改框-->
      <el-dialog title="编辑用户" :visible.sync="dialogFormVisible">
        <el-form ref="upRuleForm" :rules="rules" :model="updateForm" label-position="right" label-width="80px">
          <el-form-item label="广告描述" prop="remark">
            <el-input maxlength="16" v-model="updateForm.remark" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="广告位置" prop="open_type">
              <el-select v-model="updateForm.open_type">
                <el-option v-for="(item,index) in adLocation" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="广告链接" prop="image_url">
            <el-input v-model="updateForm.image_url" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="广告图片" prop="filepath">
            <el-button style="margin-bottom: 5px" type="primary" @click="openMapClick">选择一张广告图</el-button>
            <el-input v-model="updateForm.filepath" disabled></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="start_time">
            <el-date-picker
                v-model="updateForm.start_time"
                type="datetime"
                format="yyyy-MM-dd hh:mm:ss"
                value-format="yyyy-MM-dd hh:mm:ss"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="end_time">
            <el-date-picker
                v-model="updateForm.end_time"
                format="yyyy-MM-dd hh:mm:ss"
                type="datetime"
                value-format="yyyy-MM-dd hh:mm:ss"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input type="number" v-model="updateForm.sort" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateUserEvent">确 定</el-button>
        </div>
      </el-dialog>


      <!--      添加-->
      <el-dialog title="添加广告"   :visible.sync="addFormVisible">
        <el-form ref="upRuleForm" :rules="rules" :model="addForm" label-position="right" label-width="80px">
          <el-form-item label="广告描述" prop="remark">
            <el-input maxlength="16" v-model="addForm.remark" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="广告位置" prop="open_type">
            <el-select v-model="addForm.open_type">
              <el-option v-for="(item,index) in adLocation" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="广告链接" prop="image_url">
            <el-input v-model="addForm.image_url" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="广告图片" prop="filepath">
            <el-button style="margin-bottom: 5px" type="primary" @click="openMapClick">选择一张广告图</el-button>
            <el-input v-model="addForm.filepath" disabled></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="start_time">
            <el-date-picker
                v-model="addForm.start_time"
                type="datetime"
                format="yyyy-MM-dd hh:mm:ss"
                value-format="yyyy-MM-dd hh:mm:ss"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="end_time">
            <el-date-picker
                v-model="addForm.end_time"
                format="yyyy-MM-dd hh:mm:ss"
                type="datetime"
                value-format="yyyy-MM-dd hh:mm:ss"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input type="number" v-model="addForm.sort" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUserEvent">确 定</el-button>
        </div>
      </el-dialog>


      <MapSelect ref="mapPop" @mapselectEvent="mapselectEvent"></MapSelect>
    </div>
</template>

<script>
import  menu from '@/assets/menu.json'
import {addBanner, deleBanner, editBanner, getBanner} from "@/request";
import MapSelect from "@/components/MapSelect";
export default {
  name: "List",
  data(){
    return {
      total:0,
      pagenum:0,
      adLocation:menu.adLocation,
      startendDate:"",
      formSearch:{
        image_url:null,
        remark:null,
        open_type:null,
        start_time:null,
        end_time:null
      },
      addForm:{
        remark:null,
        open_type:null,
        image_url:null,
        start_time:null,
        end_time:null,
        sort:null,
        filepath:null
      },
      tableData:[],
      updateForm:{},
      dialogFormVisible:false,
      addFormVisible:false,
      rules: {
        remark: [
          {required: true, message: '请输入广告描述', trigger: 'blur'  },
        ],
        open_type: [
          {required: true, message: '请选择广告位置', trigger: 'blur'  },
        ],
        filepath: [
          {required: true, message: '请选择广告图片', trigger: 'blur'  }
        ],
        start_time: [
          {required: true, message: '请选择开始时间', trigger: 'blur'  }
        ],
        end_time: [
          {required: true, message: '请选择结束时间', trigger: 'blur'  }
        ],
        sort:[
          {required: true, message: '请填写排序', trigger: 'blur'  },
        ]
      }
    }
  },
  watch:{
    startendDate(news){
      this.formSearch.start_time=news[0];
      this.formSearch.end_time=news[1];
    }
  },
  created() {
    this.getAdvertiseList();
  },
  components:{
    MapSelect
  },
  computed:{
    typePosition(){
      return function (open_type){
        let obj=this.adLocation.find(o=>o.value==open_type)
        return obj.label;
      }
    }
  },
  methods:{
    async getAdvertiseList(){
        if(this.pagenum*10>this.total)return;
        this.pagenum++;
        this.formSearch['pagenum']=this.pagenum;
        let data=await getBanner(this.formSearch);
        if(data.code!=200)return this.$message.error(data.message);
        this.tableData=data.data.list;
        this.total=data.data.total;
    },
    deleteClick(id){
      this.$confirm('您将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let data=await deleBanner({ids:[id]});
        if(data.code!=200)return this.$message.error(data.message);
        this.$message.success('删除成功!');
        this.init();
        this.getAdvertiseList();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    updateClick(item){
      this.dialogFormVisible=true;
      this.updateForm={
        id:item.id,
        filepath:item.filepath,
        image_url:item.image_url,
        open_type:item.open_type,
        remark:item.remark,
        sort:item.sort,
        start_time:new Date(item.start_time).format(),
        end_time:new Date(item.end_time).format()
      };
    },
    openMapClick(){
      this.$refs.mapPop.showMapSelect()
    },
    mapselectEvent(value){
      console.log(this.addFormVisible,this.dialogFormVisible)
      if(this.addFormVisible)this.addForm['filepath']=value.length&&value[0].filepath
      if(this.dialogFormVisible)this.updateForm['filepath']=value.length&&value[0].filepath
      console.log(this.addForm,this.updateForm)

    },
    async updateUserEvent(){
      let that=this;
      this.$refs['upRuleForm'].validate(async (valid)=>{
        if(!valid){
          return false;
        }
        let data=await editBanner(this.updateForm);
        if(data.code!=200)return this.$message.error(data.message);
        this.$message.success(data.message);
        this.init();
        this.getAdvertiseList();
        this.dialogFormVisible=false;
      })
    },
    init(){
      this.pagenum=0
      this.total=0
    },
    searchClick(){
      this.init();
      this.getAdvertiseList();
    },
    clearClick(){
      this.formSearch={
        image_url:null,
        remark:null,
        open_type:null,
        start_time:null,
        end_time:null
      }
      this.startendDate=""
      this.init();
      this.getAdvertiseList();
    },
    addClick(){
      this.addFormVisible=true;
    },
    async swichEvent(val,id){
      console.log(val,id)
      let data=await editBanner({id,is_show:val});
      if(data.code!=200)return this.$message.error(data.message);
      this.$message.success(data.message);
      this.getAdvertiseList();
    },
    addUserEvent(){
      let that=this;
      this.$refs['upRuleForm'].validate(async (valid)=>{
        if(!valid){
          return false;
        }
        let data=await addBanner(that.addForm);
        if(data.code!=200)return this.$message.error(data.message);
        this.$message.success('添加成功!');
        this.addFormVisible=false;
        this.getAdvertiseList();
      })
    }
  }
}
</script>

<style  scoped>

</style>